<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>蓝思科技移动端重构</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="node_modules/flexslider/flexslider.css">
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="node_modules/flexslider/jquery.flexslider-min.js"></script>
    <script src="js/slider.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
	<!--网络18303 程正猛-->
    <div id="header">
        <div class="top"></div>
        <!-- 导航区域 -->
        <nav class="navbar navbar-expand-md navbar-light">
        	<!--蓝思logo-->
            <a href="#" class="navbar-brand">
                <img src="images/logoLens.gif" alt="LOGO">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse"  data-target="#collapseList">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapseList">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a href="#" class="nav-link">首页</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">关于蓝思</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">蓝思产品</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">蓝思资讯</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">蓝思招聘</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">蓝思供应商</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">投资者关系</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">联系蓝思</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <div id="main">
        <!-- 轮播区域 -->
        <div class="banner">
            <div class="flexslider slider">
                <ul class="slides">
                    <li><img src="images/01.jpg" alt=""></li>
                    <li><img src="images/02.jpg" alt=""></li>
                    <li><img src="images/03.jpg" alt=""></li>
                    <li><img src="images/04.jpg" alt=""></li>
                </ul>
            </div>
        </div>
        <!-- 轮播控制图片 -->
        <div class="body">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <div class="card">
                            <img class="card-img-top" src="images/pro1.jpg" alt="">
                            <div class="card-body">
                                <a href="#">公司概况</a>
                                <a href="#">Company Presentation</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <img class="card-img-top" src="images/pro2.jpg" alt="">
                            <div class="card-body">
                                <a href="#">主营业务</a>
                                <a href="#">MAIN BUSINESS</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <img class="card-img-top" src="images/pro3.jpg" alt="">
                            <div class="card-body">
                                <a href="#">主营业务</a>
                                <a href="#">MAIN BUSINESS</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <img class="card-img-top" src="images/pro6.jpg" alt="">
                            <div class="card-body">
                                <a href="#">产品展示</a>
                                <a href="#">PRODUCTS SHOW</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 脚部区域 -->
    <div id="footer">
        <!-- 脚部上部分 -->
        <section class="footerTop">
            <div class="container">
               <div class="row">
                   <div class="col-md-2 info one">
                        <img src="images/footlogo.gif" alt="footLogo">
                        <hr>
                        <img src="images/Weixin.png" alt="weixin">
                   </div>
                   <div class="col-md-2 two">
                        <ul>
                            <li class="first"><a href="#">关于蓝思</a></li>
                            <li><span></span><a href="#">集团简介</a></li>
                            <li><span></span><a href="#">生产规模</a></li>
                            <li><span></span><a href="#">蓝思荣誉</a></li>
                        </ul>
                    </div>
                    <div class="col-md-2 three">
                        <ul>
                            <li class="first"><a href="#">产品介绍</a></li>
                            <li><span></span><a href="#">业务介绍</a></li>
                            <li><span></span><a href="#">产品展示</a></li>
                            <li><span></span><a href="#">新材料</a></li>
                        </ul>
                    </div>
                    <div class="col-md-2 four">
                        <ul>
                            <li class="first"><a href="#">新闻资讯</a></li>
                            <li><span></span><a href="#">蓝思新闻</a></li>
                            <li><span></span><a href="#">媒体报道</a></li>
                            <li><span></span><a href="#">公告公示</a></li>
                        </ul>
                    </div>
                    <div class="col-md-2 five">
                        <ul>
                            <li class="first"><a href="#">人才招聘</a></li>
                            <li><span></span><a href="#">招聘动态</a></li>
                            <li><span></span><a href="#">校园招聘</a></li>
                            <li><span></span><a href="#">社会招聘</a></li>
                            <li><span></span><a href="#">蓝思风采</a></li>
                        </ul>
                    </div>
                    <div class="col-md-2 six">
                        <ul>
                            <li class="first"><a href="#">供应商管理</a></li>
                            <li><span></span><a href="#">准入基本条件</a></li>
                            <li><span></span><a href="#">资料下载</a></li>
                        </ul>
                    </div>
               </div>
            </div>
        </section>
        <hr>
        <!-- 脚部下 -->
        <section class="footerBottom">
            <p>Copyright(C)2016-2020 蓝思科技股份有限公司 All Rights Reserved <a href="#">湘ICP备14007891号</a> <a href="#">湘公网安备43018102000116号</a> </p>
        </section>
    </div>
</body>
</html>